<template>
	<div class="articleList">
		<li v-for="item in list" @click="$router.push('/article?id='+item._id)">
			<!--  左右结构 -->
			<div v-if="item.imageSrc.length === 1" class="articleItem-single">
				<div class="articleList-left">
					<div class="title">{{ item.title }}</div>
					<div class="info">
						<span>{{ item.author }}</span>
						<span> {{ item.comment }}评论</span>
						<span>{{ item.timeStr }}</span>
					</div>
				</div>
				<div class="image-list">
					<div class="img" v-for="img in item.imageSrc">
						<img @error="imgError" :src="img"
						 v-lazy="img"
						  />
					</div>
				</div>
			</div>
		
			<div v-else>
				<div class="title">{{ item.title }}</div>
				<div class="image-list">
					<div class="img" v-for="img in item.imageSrc">
						<img @error="imgError" :src="img"  v-lazy="img" />
					</div>
				</div>
				<div class="info">
					<span>{{ item.author }}</span>
					<span> {{ item.comment }}评论</span>
					<span>{{ item.timeStr }}</span>
				</div>
			</div>
		</li>
	</div>
</template>

<script>


	export default {
		name:"ArticleList",
		props:{
			list:{
				type:Array,
				default:()=>[]
			}
		}
	}
</script>

<style lang="scss" >
	
	.articleList {
		padding: 0 10px;
	
		li {
			padding: 10px 0;
			border-bottom: 1px solid #eee;
		}
	
		.title {
			color: #222;
			font-size: 18px;
			line-height: 25px;
			white-space: pre-wrap;
			word-break: break-all;
			overflow: hidden;
			width: 100%;
		}
	
		.articleItem-single {
			display: flex;
		}
	
		.image-list {
			border-radius: 1px;
			display: flex;
			justify-content: space-between;
			margin-top: 5px;
			overflow: hidden;
	
			.img {
				width: 100px;
				height: 66.5px;
			}
	
			img {
				width: 100px;
				height: 66.5px;
			}
		}
	
		//  左右结构布局
	
		.articleList-left {
			width: 240px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
	
		.info {
			color: #999;
			display: flex;
			font-size: 12px;
			line-height: 16px;
			margin-top: 8px;
	
			span {
				margin-right: 10px;
			}
		}
	}
</style>